<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimum-scale=1,maximum-scale=1">
    <title>区块头条</title>


    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
    <!-- 二维码 -->
    <script src="js/jquery.qrcode.min.js" type="text/javascript"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="bootstrap/js/bootstrap.min.js"></script>

    <!--自定义字体-->
    <link rel="stylesheet" href="css/font.css">

    <!--日历-->
    <link rel="stylesheet" type="text/css" href="css/simple-calendar.css">
    <script src="js/simple-calendar.js"></script>

    <link rel="stylesheet/less" type="text/css" href="css/base.less" />
    <link rel="stylesheet" type="text/css" href="css/leftNewsModel.css">
    <link rel="stylesheet" type="text/css" href="css/rightNewsModel.css">
    <link rel="stylesheet" type="text/css" href="css/search.css">


    <!--各种图-->
    <script type="text/javascript" src="js/echart/echarts.min.js"></script>
    <script src="js/less.js"></script>
    <script src="js/qs.js"></script>
    <script src="js/base.js"></script>
    <script src="js/jquery.cookie.js"></script>
    <script src="js/jquery.md5.js"></script>
    <script src="js/html-params.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/vue.js"></script>

    <script src="js/component.js"></script>
    <script src="js/page/leftNewsModal.js"></script>
    <script src="js/page/search.js"></script>
</head>
<body>
<div id="header" v-cloak="">
    <header-content></header-content>
</div>

<div id="main">
    <div class="body">
        <div class="content">
            <!--搜索条-->
            <div id="search-box">
                <div class="input-search-group" >
                    <input type="text" class="form-control search-content" v-model="searchContent" placeholder="请输入搜索内容" aria-describedby="basic-addon2" @keyup.enter="search">
                    <span class="input-search-group-addon pointer" id="basic-addon2" @click="search">搜索</span>
                </div>
            </div>

            <div id="block-information" class="left" >

                <!--资讯标签导航条-->
                <div id="information-nav">
                    <nav class="navbar" id="nav-line">
                        <div class="padding-0">
                            <!-- Brand and toggle get grouped for better mobile display -->
                            <div class="navbar-header">
                                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#information-list" aria-expanded="false">
                                    <span class="sr-only">Toggle navigation</span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                </button>
                                <!--<a class="navbar-brand" href="#"></a>-->
                            </div>

                            <!-- Collect the nav links, forms, and other content for toggling -->
                            <div class="collapse navbar-collapse" id="information-list">
                                <ul class="nav navbar-nav navbar-left">
                                    <li class="news-nav nav-active" @click="changeNews('1',$event)" value="1"><a href="#" class="font-hover-blue">24H快讯<span class="sr-only">(current)</span></a></li>
                                    <li class="news-nav" @click="changeNews('4',$event,true)" value="4"><a href="#" class="font-hover-blue">精选资讯</a></li>
                                    <li class="news-nav" @click="changeNews('2',$event,true)" value="2"><a href="#" class="font-hover-blue">微博</a></li>
                                    <li class="news-nav" @click="changeNews('3',$event,true)" value="3"><a href="#" class="font-hover-blue">Twitter</a></li>
                                    <li class="news-nav" @click="changeNews('5',$event,true)" value="5"><a href="#" class="font-hover-blue">技术分析</a></li>
                                    <li class="news-nav" @click="changeNews('6',$event,true)" value="6"><a href="#" class="font-hover-blue">币种</a></li>
                                </ul>
                            </div><!-- /.navbar-collapse -->
                        </div><!-- /.container-fluid -->
                    </nav>
                </div>


                <div class="information-box">
                    <!--24H快讯-->
                    <div  id="quick-information" class="news-box" v-cloak="">
                        <quick-content v-for="(val,ke,index) in quickBlock" :key="index" :ke="ke" :val="val" :index="index" :quick-block="quickBlock"></quick-content>
                        <div class="noData hidden">暂无信息</div>
                        <div class="loadData">数据加载中...</div>

                    </div>

                    <!--精选资讯-->
                    <div  id="sift-information" class="news-box hidden">
                        <sift-content v-for="(item,index) in siftBlock" :key="index" :item="item" :index="index" :sift-block="siftBlock"></sift-content>

                        <div class="noData hidden">暂无信息</div>
                        <div class="loadData">数据加载中...</div>
                    </div>

                    <!--twitter-->
                    <div  id="twitter-information" class="news-box hidden">
                        <twitter-content v-for="(item,index) in twitterBlock" :key="index" :item="item" :index="index" :twitter-block="twitterBlock"></twitter-content>

                        <div class="noData hidden">暂无信息</div>
                        <div class="loadData">数据加载中...</div>
                    </div>

                    <!-- 微博 -->
                    <div  id="blog-information" class="news-box hidden">
                        <blog-content v-for="(item,index) in blogBlock" :key="index" :item="item" :index="index" :blog-block="blogBlock" :large-img="largeImg"></blog-content>

                        <div class="noData hidden">暂无信息</div>
                        <div class="loadData">数据加载中...</div>
                    </div>

                    <!--技术分析-->
                    <div  id="skill-information" class="news-box hidden">
                        <skill-content v-for="(item,index) in skillBlock" :key="index" :item="item" :index="index" :skill-block="skillBlock" ></skill-content>

                        <div class="noData hidden">暂无信息</div>
                        <div class="loadData">数据加载中...</div>
                    </div>




                    <!--货币列表-->
                    <div id="currency-list" class="news-box  hidden">
                        <div role="tabpanel" class="tab-pane " id="market">
                            <table class="table currency-table">
                                <thead>
                                <tr>
                                    <td>自选</td>
                                    <td>&nbsp;</td>
                                    <td>名字</td>
                                    <td>价格 <img src="image/paixu1.png"  class="sort-img" value="1" @click="changeSort" type="1"></td>
                                    <td>24H涨跌幅 <img src="image/paixu1.png"  class="sort-img" value="1" @click="changeSort" type="2"></td>
                                    <td>24H价格趋势</td>
                                    <td>流通数量 <img src="image/paixu1.png"  class="sort-img" value="1" @click="changeSort" type="1"></td>
                                    <td>24H成交额 <img src="image/paixu1.png"  class="sort-img" value="1" @click="changeSort" type="3"></td>
                                    <td>24H成交量 <img src="image/paixu1.png"  class="sort-img" value="1" @click="changeSort" type="4"></td>
                                    <td>市值 <img src="image/paixu1.png"  class="sort-img" value="1" @click="changeSort" type="5"></td>
                                    <!--<td>推荐交易所</td>-->
                                </tr>
                                </thead>
                                <tbody>
                                <tr  :value="item.id"  v-for="(item,index) in market.list" v-cloak="">
                                    <td class="favorite" v-if="item.isFavorite" :value="index">
                                        <img src="image/shoucanghou.png" @click="setFavorite('market',$event)">
                                    </td>
                                    <td class="favorite" v-else :value="index">
                                        <img src="image/shoucangqian.png" @click="setFavorite('market',$event)">
                                    </td>
                                    <td @click="goCurrencyProfile">{{ item.index }}</td>
                                    <td class="bourse" @click="goCurrencyProfile">
                                        <!--<div v-for="name in item.names">{{ name }}</div>-->
                                        <div >{{ item.enName }}</div>
                                        <div >{{ item.zhName }}</div>
                                    </td>
                                    <td @click="goCurrencyProfile">{{ item.price }}</td>
                                    <td :class="{'font-up':item.isUp, 'font-down':!item.isUp }">{{item.fluctuate}}</td>
                                    <td class="flow-td" @click="goCurrencyProfile">
                                        <div  :id="item.id" class="flow-img" style="width:162px; height:39px;"></div>
                                    </td>
                                    <td @click="goCurrencyProfile">{{ item.flowNum }}</td>
                                    <td @click="goCurrencyProfile">{{ item.transPirce }}</td>
                                    <td @click="goCurrencyProfile">{{ item.transNum }}</td>
                                    <td @click="goCurrencyProfile">{{ item.marketNum }}</td>
                                </tr>
                                <tr class="noData hidden"><td  colspan="10">暂无信息</td></tr>
                                <tr class="loadData hidden"><td  colspan="10">数据加载中...</td></tr>
                                </tbody>

                            </table>
                        </div>
                    </div>

                </div>

            </div><!-- div .left-->

            <!--右边资讯栏目-->
            <div id="news-information" class="right">

                <!--热门搜索-->
                <div class="hot-search-box box">
                    <div class="single-title">热门搜索</div>
                    <div class="single-content hot-content">
                        <div class="hot-btn pointer" v-for="(item,index) in hotList" @click="toHotSearch" :value="index" v-cloak="">{{item.name}}</div>
                        <div class="clearfix"></div>
                    </div>
                </div>

                <!--你可能喜欢-->
                <!--<div class="notice-box box">-->
                    <!--<div class="single-title">你可能喜欢</div>-->
                    <!--<div class="single-content">-->
                        <!--<div class="love-item" v-for="item in loveBlock">-->
                            <!--<div class="love-left"><img :src="item.src"></div>-->
                            <!--<div class="love-right">-->
                                <!--<div class="title">{{ item.title }}</div>-->
                                <!--<div class="derc">{{ item.derc }}</div>-->
                                <!--<div class="clearfix"></div>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->

            </div>

            <div class="clearfix"></div>
        </div>
    </div>


</div>

<div class="clearfix"></div>
<div id="footer">
    <footer-content></footer-content>
</div>


<!--查看大图-->
<div class="modal fade" id="largeImgModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div type="button" class="close-btn pointer" data-dismiss="modal"><img src="image/largeClose.png" @mouseEnter="btnIn(2)" @mouseLeave="btnOut(2)"> </div>
                <div class="left-btn " @click="prevImg" @mouseEnter="btnIn(1)" @mouseLeave="btnOut(1)"><img src="image/largeLeft.png"></div>
                <div class="right-btn " @click="nextImg" @mouseEnter="btnIn(0)" @mouseLeave="btnOut(0)"><img src="image/largeRight.png"></div>
                <!--<div class="img-box"><img :src="imgUrl" :index="index"></div>-->
                <img :src="imgUrl" class="curr-img" :index="index">
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
</div>


</body>
</html>
